<template>
  <div class="warp">
    <div class="banner" v-if="!systemShow">
      <div class="title">智慧社区管理系统</div>
      <el-button class="btn-default" plain @click="enterControl">进入后台</el-button>
    </div>
    <div class="alarm-map">
      <Village-alarm :mapList="mapList"></Village-alarm>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import FontIcon from '../../assets/styles/iconfont.css'
import TimeDate from '../../components/common/ui/TimeDate'
import VillageAlarm from '../../components/common/event/villageAlarm'

export default {
  name: 'alarmMap',
  components: {
    FontIcon,
    TimeDate,
    VillageAlarm
  },
  props: ['deptId'],
  data () {
    return {
      alarmNum: '', // 今日报警数量
      mapList: [], // 地图坐标点数据
      alarmNameTitle: '' // 告警类别名称
    }
  },
  computed: {
    ...mapState({
      systemShow: 'systemShow',
      warnAllData: state => state.event.warnAllData
    })
  },
  watch: {
    deptId (val) {
      this.init()
    }
  },
  mounted () {
    // this.init()
  },
  methods: {
    // 初始化
    init () {
      if (!this.deptId) return
      let _this = this
      let url = this.$base.getUrl('getEventListByDeptId')

      let params = {
        url: url,
        data: {
          'deptId': this.deptId
        }
      }

      this.$store.dispatch('getForm', params).then((res) => {
        _this.mapList = res
        _this.alarmList = res
      })

      this.handleGetCurrentAlermNum()
    },
    // 拉取告警数
    handleGetCurrentAlermNum () {
      let url = this.$base.getUrl('getCountByState')
      let params = {
        url: url,
        data: {
          deptId: this.deptId,
          limit: 999,
          page: 0
        }
      }
      this.$store.dispatch('getForm', params).then((res) => {
        this.alarmNum = res > 0 ? res : '0'
      })
    },
    enterControl () {
      this.$router.push({
        name: 'index'
      }, () => {
        window.location.reload()
      })
    }
  }
}
</script>
<style lang="less" scoped>
.skin-white {
  .warp {
    color: #4c6072 !important;
  }
}

.warp {
  position: relative;
  width: 100%;
  height: 100%;
}

.clearfix {
  clear: both;
}

.banner {
  position: absolute;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 68px;
  line-height: 40px;
  vertical-align: middle;
  background: url('../../assets/images/top-img@2x.png') no-repeat;
  background-size: contain;
}

.title {
  width: 100%;
  text-align: center;
  font-size: 32px;
  height: 60px;
  line-height: 60px;
  font-family: PingFangSC, PingFangSC-Semibold;
  font-weight: 600;
  color: #4fe3c1;
  letter-spacing: 7px;
}
.btn-default {
  position: absolute;
  top: 1px;
  right: 30px;
  z-index: 1;
  display: inline-block;
  padding: 4px 12px;
  font-size: 14px;
  font-weight: 400;
  background: none;
  border: 1px solid #ccc;
}

.alarm-num span {
  margin-left: 5px;
  color: #f5a623;
  font-size: 16px;
}

.alarm-map {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
